//====================饼图=====================

function pieChart(data){
let myChart = echarts.init($('.pie')[0]);  // $('.pie') 是jQuery对象；加入 [0] 转成DOM对象
let  option = {
    // 标题
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 鼠标移入的提示
    tooltip: {
      // 自定义提示内容
      // {a} series[].name 
      // {b} series[].data[].name
      // {c} series[].data[].value
      // {d} 占比
      formatter: '{a}<br />{b} <strong>{c}</strong>人 占比{d}%'
    },
    // 系列数据
    series: [
      {
        name: '各地人员分布',
        type: 'pie', // pie表示饼图；
        radius: ['10%', '60%'], // 半径
        center: ['50%', '50%'], // 中心点坐标
        // roseType 表示扇形区域如何展示数据，可选值有area、radius
        // area 表示使用扇形的半径表示数据的大小；每个扇形的圆心角相同
        // radius 表示使用扇形的半径表示数据的大小；使用圆心角表示占比
        roseType: 'area',
        // itemStyle 表示每一项的样式
        itemStyle: {
          borderRadius: 6 // 扇形圆角设置
        },
        // data表示的是数据部分
        data:data
        
      }
    ]
  };
  myChart.setOption(option);
}
//pieChart();

//====================折线图===================

function lineChart(lineName,salary,truesalary){
    let myChart = echarts.init($('.line')[0]);
    let option = {
        // 图例
        legend: {
          top: 20
        },
        // 鼠标移入的提示
        tooltip: {
          // axis表示轴触发，鼠标放到线条上面或下面也可以触发
          // item 表示鼠标放到每一项上才能触发
          trigger: 'axis', // 触发方式
          // 悬浮框的位置
          position: function (pt) {
            // pt = [鼠标x轴位置, 鼠标y轴位置]
            return [pt[0], '15%']; // 悬浮框左右方向跟随鼠标移动；上下方向不变（始终距离顶部15%）
          }
        },
        // 标题
        title: {
          text: '薪资 Salary',
          textStyle: {
            color: '#6d767e'
          }
        },
        xAxis: {
          type: 'category',
          // 坐标轴留白策略
          boundaryGap: false, // true表示留白；false表示不留白
          // data: date
          data:lineName,
        },
        yAxis: {
          type: 'value',
          // 坐标轴留白策略
          // 数组，表示数据的延伸
          // y轴数据最大值 ==== 数据最大值 + 数据最大值 * 延伸比例  
    
          // y轴数据最大值 ==== 17000 + 17000 * 50% === 25500
          boundaryGap: [0, '50%']
        },
        // 数据缩放组件
        // 数据缩放组件，有三种类型
        // type: select 通过工具箱来缩放
        // type: inside 会把数据缩放组件内置到x轴上，通过鼠标滚轮缩放
        // type: slider (默认值)，会有一个单独的拖动条
        dataZoom: [
          {
            // type: 'slider',
            start: 0, // start和end都是百分比
            end: 15
          }
        ],
        // 系列数据
        series: [
          {
            name: '期望薪资',
            type: 'line',
            smooth: true, // 使用平滑曲线
            symbol: 'none', // 设置线条上没有任何点，也可以设置为空心圆、实心圆、矩形、.......
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            // areaStyle: {}, // 表示面试的这项删除
            data: salary
          },
          {
            name: '实际薪资',
            type: 'line',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              color: 'rgb(255, 200, 31)'
            },
            data:truesalary
          }
        ]
      };
      myChart.setOption(option);
    }
    //lineChart(); 

//====================柱状图===================
//let 形参=实参
function barChart ({avgScore,group,gt60,gt80,lt60}) {
  //注意:不要找错盒子
    let myChart = echarts.init($('.barChart')[0])
    let option = {
      tooltip: {
        trigger: 'axis',//轴触发 可选item 是每一项
        axisPointer: {//坐标轴指示器  
          type: 'cross',//控制横向的线(虚线)
          crossStyle: {
            color: '#999'//颜色
          }
        }
      },
      //网格（整个图表区域设置）
      grid:{
        top:30,
        bottom:30,
        left:'7%',
        right:'7%'
      },
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     magicType: { show: true, type: ['line', 'bar'] },
      //     restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      //图例
      legend: {},
      //x轴
      xAxis: [
        {
          type: 'category',
          data: group,
          axisPointer: {
            //阴影  控制柱子上阴影,如果没有就是一条线
            type: 'shadow'
          }
        }
      ],
      //y轴
      yAxis: [
        {
          type: 'value',
          //name: '分数',
          min: 0,//y轴数据最小值
          max: 100,// y轴数据最大值
          interval: 10,// step步长，把y轴的数据分成多少份
          axisLabel: {// Y轴文字设置
            formatter: '{value} 分'
          }
        },
        {
          type: 'value',
          //name: '人数',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value} 人'
          }
        }
      ],
      // 数据部分（4组数据)
      series: [
        {
          name: '平均分',
          type: 'bar',
          //修改每个柱子的宽度
          barWidth:15,
          data:avgScore
        },
        {
          name: '低于60分人数',
          type: 'bar',
          barWidth:15,
          //y轴索引 表示使用右侧y轴
          yAxisIndex: 1,
          data:lt60
        },
        {
          name: '60到80分人数',
          type: 'bar',
          barWidth:15,
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          data:gt60
        },
        {
          name: '高于80分人数',
          type: 'bar',
          barWidth:15,
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          data:gt80
        }
      ]
    };
    myChart.setOption(option);
    }
    //barChart ();

//====================地图=====================

function mapChart(chinaGeoCoordMap,chinaDatas){
  let myChart = echarts.init($('.map')[0]);//'dark'背景加深颜色
  // let chinaGeoCoordMap = {
	// 	'黑龙江': [127.9688, 45.368],
	// 	'内蒙古': [110.3467, 41.4899],
  //   //北京市目标点,不可以删除
	// 	'北京市': [116.4551, 40.2539],
	// 	"河北": [114.4995, 38.1006],
	// 	"天津": [117.4219, 39.4189],
	// 	"海南": [110.3893, 19.8516],
	// 	'上海': [121.4648, 31.2891]
	// };
	// let chinaDatas = [
	// 	[{
	// 		name: '黑龙江',
  //     //控制地图上的红点大小
	// 		value: 0
	// 	}],	[{
	// 		name: '内蒙古',
	// 		value: 0
	// 	}],[{
	// 		name: '河北',
	// 		value: 0
	// 	}],	[{
	// 		name: '天津',
	// 		value: 0
	// 	}],[{
	// 		name: '海南',
	// 		value: 0
	// 	}],	[{
	// 		name: '上海',
	// 		value: 0
	// 	}]
	// ];

	let convertData = function(data) {
		let res = [];
		for(let i = 0; i < data.length; i++) {
			let dataItem = data[i];
			let fromCoord = chinaGeoCoordMap[dataItem[0].name];
			let toCoord = [116.4551,40.2539];
			if(fromCoord && toCoord) {
				res.push([{
					coord: fromCoord,
					value: dataItem[0].value
				}, {
					coord: toCoord,
				}]);
			}
		}
		return res;
	};
	let series = [];
  //北京市可以修改,但是上下必须统一
	[['北京市', chinaDatas]].forEach(function(item, i) {
	    console.log(item)
		series.push({
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
					//symbol: 'arrow', //箭头图标
          symbol: 'path://M644.427078 956.858834c-1.959631 0-3.929496-0.322341-5.829775-0.981351l-93.384877-32.326243c-9.302877-3.219321-14.233166-13.371542-11.012821-22.674419 3.219321-9.3039 13.372565-14.233166 22.674419-11.012821l69.729108 24.136723 0-27.361161-56.793494-51.671846c-4.507664-4.100388-6.607488-10.218736-5.568832-16.223496 1.481747-8.56405 2.202155-15.871479 2.202155-22.339798 0-0.37146 0.01228-0.74292 0.034792-1.113357l10.960633-175.081551c0.372483-5.954619 3.700275-11.328 8.863878-14.31503 5.166673-2.989077 11.482519-3.192715 16.82827-0.548492l311.807538 154.23271 0-64.716954L589.587076 410.05312c-3.866051-3.385097-6.083555-8.273431-6.083555-13.411451L583.503521 181.125197c0-22.372543-9.601682-51.562353-24.461111-74.362638-15.458063-23.719214-34.08326-37.323047-51.099818-37.323047-17.016559 0-35.642778 13.602809-51.099818 37.322024-14.859429 22.800285-24.460088 51.990095-24.460088 74.362638l0 215.515449c0 5.13802-2.217505 10.027377-6.083555 13.411451L100.941993 694.860724l0 64.501036 306.089303-153.963581c5.323239-2.677992 11.632945-2.517333 16.813944 0.425695 5.180999 2.943029 8.5487 8.280594 8.975419 14.223956l13.57825 189.452863c0.030699 0.423649 0.045025 0.849344 0.045025 1.274016 0 3.140527 0.372483 6.514367 0.76748 10.085706l0.146333 1.332345c0.618077 5.675256-1.51961 11.304464-5.749958 15.138792l-54.42761 49.327452 0 27.220968L443.965487 893.933689c16.090467-6.587022 51.374064-9.872858 73.997318 23.608697 5.511527 8.156774 3.367701 19.237133-4.790096 24.74866-8.156774 5.509481-19.237133 3.367701-24.74866-4.790096-5.106298-7.557116-11.355629-11.511171-19.105127-12.087293-6.149047-0.459464-11.268648 1.313925-12.056594 1.604544-0.410346 0.186242-0.512676 0.209778-0.997724 0.38067l-81.002872 28.452006c-5.453199 1.914606-11.496845 1.067308-16.213263-2.27481-4.715395-3.342118-7.518231-8.762571-7.518231-14.543228l0-60.274782c0-5.031597 2.12643-9.827833 5.854335-13.20679l53.638641-48.613184c-0.12382-1.769296-0.209778-3.598968-0.226151-5.482875l-11.624758-162.198126L91.127464 804.205085c-5.52483 2.7793-12.096503 2.494821-17.362436-0.750083s-8.471952-8.987698-8.471952-15.173584l0-101.504812c0-5.13802 2.217505-10.027377 6.084579-13.411451l325.355089-284.808628L396.732743 181.125197c0-29.250184 11.588943-65.203024 30.242791-93.826945 22.487154-34.504862 51.241035-53.507658 80.967056-53.507658 29.723975 0 58.477856 19.002796 80.966033 53.507658 18.654872 28.624944 30.244838 64.576761 30.244838 93.826945l0 207.430306 325.350996 284.808628c3.866051 3.385097 6.083555 8.273431 6.083555 13.411451l0 101.504812c0 6.163373-3.184529 11.890818-8.420787 15.142885-5.234211 3.252067-11.780301 3.567245-17.306154 0.833995L611.344612 649.180336l-9.253758 147.804301c-0.025583 5.622044-0.436952 11.579733-1.24741 18.022469l55.579853 50.567699c3.712555 3.377934 5.828752 8.16496 5.828752 13.184277l0 60.274782c0 5.76633-2.789533 11.175527-7.485485 14.519692C651.707902 955.73115 648.085398 956.858834 644.427078 956.858834z',
					symbolSize: 10, //图标大小
          color:'pink',//线上箭头颜色
				},
				lineStyle: {
					normal: {
						width: 1, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: .3 //尾迹线条曲直度
					}
				},
				data: convertData(item[1])
			}, {
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: { //涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 4 //波纹圆环最大限制，值越大波纹越大
				},
				label: {
					normal: {
						show: true,
						position: 'right', //显示位置
						offset: [5, 0], //偏移设置
						formatter: function(params){//圆环显示文字
							return params.data.name;
						},
						fontSize: 13
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'circle',
				symbolSize: function(val) {
					return 5+ val[2] * 5; //圆环大小
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#f00'
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[0].name,
						value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
					};
				}),
			},
			//被攻击点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						//offset:[5, 0],
						color: '#0f0',
						formatter: '{b}',
						textStyle: {
							color: "#0f0"
						}
					},
					emphasis: {
						show: true,
						color: "#f60"
					}
				},
				symbol: 'pin',
				symbolSize: 50,
				data: [{
					name: item[0],
					value: chinaGeoCoordMap[item[0]].concat([10]),
				}],
			}
		);
	});

	let option = {
    title:{
      text:'来京路线 Form',
      textStyle:{
        color:'#6d767e'
      }
    },
		tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(166, 200, 76, 0.82)',
			borderColor: '#FFFFCC',
			showDelay: 0,
			hideDelay: 0,
			enterable: true,
			transitionDuration: 0,
			extraCssText: 'z-index:100',
			formatter: function(params, ticket, callback) {
				//根据业务自己拓展要显示的内容
				var res = "";
				var name = params.name;
				var value = params.value[params.seriesIndex + 1];
				res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
				return res;
			}
		},
		backgroundColor:"#fff",
    //视觉映射组件
		visualMap: { //图例值控制
			min: 0,
			max: 1,
			calculable: true,
      show:false,
			color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
			textStyle: {
				color: '#fff'
			}
		},
		geo: {
			map: 'china',
			zoom: 1.2,
			label: {
				emphasis: {
					show: false
				}
			},
			roam: true, //是否允许缩放
			itemStyle: {
				normal: {
					color: 'rgba(51, 69, 89, .5)', //地图背景色
					borderColor: '#516a89', //省市边界线00fcff 516a89
					borderWidth: 1
				},
				emphasis: {
					color: 'rgba(37, 43, 61, .5)' //悬浮背景(鼠标放上的颜色)
				}
			}
		},
		series: series
	};
  myChart.setOption(option);
}
//mapChart();

// ====================Ajax获取数据====================

//发送请求,获取班级概况数据
axios.get('/student/overview').then(({data:res})=>{
  if(res.code===0){
    $('.total').text(res.data.total);
    $('.avgSalary').text(res.data.avgSalary);
    $('.avgAge').text(res.data.avgAge);
    $('.proportion').text(res.data.proportion);
  }
})


// 2.柱状图
// 2.1 点击“三个点”，切换下拉菜单
$('.bar .btn').on('click', function (){
  // $(this)表示“三个点”
  // $(this).next()表示它下一个兄弟，就是下拉列表
  // toggle()自动检测元素是显示还是隐藏; 如果元素是显示的则让其隐藏; 如果元素是隐藏的则让其显示 
  $(this).next().toggle();
})

//2.2 点击 li 获取对应的成绩,拿到成绩后,传入到柱状图中使用
$('#batch>li').on('click',function(){

let index = $(this).index();//得到0/1/2/3/4当前的索引(li元素在兄弟之间的位置)
 let batch=index+1;//得到考试次数  1/2/3/4/5

  //发送请求,获取柱状图所需数据
  axios.get('/score/batch',{params:{batch}}).then(({data:res})=>{
    //console.log(res);
    if(res.code===0){
      barChart(res.data);
    } 
  })
})

// 2.3 默认让第一次成绩显示
// $('类名').trigger('触发事件')
$('#batch>li').eq(0).trigger('click');//trigger是jQuery用法,用来触发事件


// ========================获取学员全部信息===================
//从中提取 折线图,饼图,地图所需数据
axios.get('./student/list').then(({data:res})=>{
  let {code,data}=res;
  if(code===0){
    //整理出折线图,饼图,地图所需数据
    // 折线图需要的数据是
    // ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', .......]
    // [8300, 9600, 15000, 17000, 12000, 8300, 9600, .......]
    // [8300, 9600, 15000, 17000, 12000, 8300, 9600, .......]
    let lineName = [];
    let salary = [];
    let truesalary = [];

    // 饼图所需数据
    let pie = [];  // [{name: '河北省', value: 3}, {name: '内蒙古', value: 1}, {name: '山东省', value: 2}, {name: '辽宁省', value: 1}]

    // 地图所需数据
    let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] };
    let chinaDatas = [];

    data.forEach(item => {
      // ---------- 处理折线图所需数据------------------
      lineName.push(item.name);
      salary.push(item.salary);
      truesalary.push(item.truesalary);

      // ----------- 处理饼图所需数据 ------------------
      let i = pie.findIndex(v => v.name === item.province);
      if (i > -1) {
        pie[i].value += 1;
      } else {
        pie.push({ name: item.province, value: 1 });
      }

      // ------------ 处理地图所需数据 ----------------
      chinaGeoCoordMap[item.province] = [item.jing, item.wei];
      // chinaDatas.push([{ name: item.province, value: 0 }])
      let k = chinaDatas.findIndex(v => v[0].name === item.province);
      if (k > -1) {
        chinaDatas[k][0].value += 1;
      } else {
        chinaDatas.push([{ name: item.province, value: 1 }])
      }
    });
 
    //调用 lineChart pieChart mapChart,传入数据

    lineChart(lineName, salary, truesalary);
    pieChart(pie);
    mapChart(chinaGeoCoordMap, chinaDatas);
   
    
  }
});

